<template>
  <el-form ref="inlandLogisticsForm" :model="form" :inline="true" :rules="formRules" label-width="120px" label-position="right">
    <el-divider content-position="left">
      国内物流
      <el-popover title="配送说明" trigger="hover">
        <i slot="reference" class="el-icon-question" />
        <div slot>
          默认配送时间：工作日周一至周五9:00 - 18:00<br>
          如贵司在非工作时段或节假日可收货，请在备注栏说明
        </div>
      </el-popover>
    </el-divider>
    <!--收货方式 与 交货类型-->
    <el-row>
      <el-form-item label="收货方式:" prop="receivingMode">
        <el-radio-group v-model="form.receivingMode" @change="changeReceivingMode">
          <el-radio v-for="item in $store.getters.dictSelectData.escm_receiving_mode" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--非客户自提才显示交货类型-->
      <el-form-item v-if="form.receivingMode === 2 || form.receivingMode === 3" label="交货类型:" prop="deliveryType">
        <el-radio-group v-model="form.deliveryType" @change="changeDeliveryType">
          <el-radio v-for="item in $store.getters.dictSelectData.escm_delivery_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
        <!--多点交货提示-->
        <div v-if="form.deliveryType === 2" class="tip-message">多个交货点请在订单保存后至 收货安排 中新增</div>
      </el-form-item>
    </el-row>

    <!--自提-->
    <div v-show="form.receivingMode === 1">
      <!--提货人信息-->
      <el-row>
        <el-form-item label="提货人:" prop="pickPerson">
          <el-select v-model="form.pickPerson" value-key="id" filterable clearable remote :remote-method="getPickPersonList" :loading="pickPersonLoading" popper-class="common-select-popper">
            <el-option v-for="item in pickPersonList" :key="'pick' + item.id" :label="buildPickPersonInfo(item)" :value="item" class="common-select-option">
              <div class="select-title">{{ item.name }}</div>
              <span class="select-other">
                {{ item.company }}
                <el-divider direction="vertical" />
                {{ item.tel }}
                <el-divider direction="vertical" />
                {{ item.phone }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货公司:">
          <el-input :value="form.pickPerson ? form.pickPerson.company : ''" readonly />
        </el-form-item>
      </el-row>
      <!--备注 及 提货委托书-->
      <el-row>
        <el-form-item label="备注:" prop="memo">
          <el-input v-model.trim="form.memo" type="textarea" :autosize="{ minRows: 5}" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="提货委托书:">
          <FileUpload ref="pickFile" :file-tag="4" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" />
        </el-form-item>
      </el-row>
    </div>

    <!--非自提 且 单个送货点-->
    <div v-if="(form.receivingMode === 2 || form.receivingMode === 3) && form.deliveryType === 1">
      <!--发运要求-->
      <el-row v-if="form.receivingMode === 3">
        <el-form-item label="发运要求:" prop="shippingRequirement">
          <el-radio-group v-model="form.shippingRequirement">
            <el-radio v-for="item in $store.getters.dictSelectData.escm_shipping_requirement" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <!--运营商 及 时效要求-->
      <el-row>
        <el-form-item :label="form.receivingMode == 3 ? '物流商:' : '承运商:'" prop="expressCompany">
          <el-select v-model.trim="form.expressCompany" value-key="value" filterable clearable :disabled="disabledExpressCompany" @change="changeExpressCompany">
            <el-option v-for="item in $store.getters.dictSelectData[form.receivingMode == 3 ? 'escm_express_company' : 'escm_self_express_company']" :key="item.id" :value="item" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="时效要求:" prop="timelinessRequirement">
          <el-select v-model.trim="form.timelinessRequirement" filterable clearable :disabled="!form.expressCompany">
            <el-option v-for="item in timelinessRequirementList" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
      </el-row>
      <!--送货方式 费用区间 要求发货时间-->
      <el-row>
        <el-form-item v-if="form.receivingMode === 3" label="送货方式:" prop="deliveryMode">
          <el-select v-model.trim="form.deliveryMode" filterable clearable>
            <el-option v-for="item in $store.getters.dictSelectData.escm_delivery_mode" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.receivingMode === 3" label="费用区间" prop="costRange">
          <el-select v-model.trim="form.costRange" filterable clearable>
            <el-option v-for="item in $store.getters.dictSelectData.escm_cost_range" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.receivingMode === 2" label="要求发货时间:" prop="pickTime">
          <el-date-picker v-model="form.pickTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
      </el-row>
      <!--收货地址 收货公司-->
      <el-row>
        <el-form-item label="收货地址:" prop="deliveryAddress">
          <el-select v-model="form.deliveryAddress" value-key="id" filterable clearable remote :remote-method="getDeliveryAddressList" :loading="deliveryAddressLoading" popper-class="common-select-popper" @change="changeDeliveryAddress">
            <el-option v-for="item in deliveryAddressList" :key="item.id" :label="item.address" :value="item" class="common-select-option">
              <div class="select-title">{{ item.address }}</div>
              <span class="select-other">
                {{ item.company }}
                <el-divider direction="vertical" />
                {{ item.name }}
                <el-divider direction="vertical" />
                {{ item.tel }}
                <el-divider direction="vertical" />
                {{ item.phone }}
              </span>
            </el-option>
            <!-- <el-pagination small layout="prev, pager, next" :total="50" /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="收货公司:">
          <el-input :value="form.deliveryAddress ? form.deliveryAddress.company : ''" readonly />
        </el-form-item>
      </el-row>
      <!--联系人和电话及费用区间-->
      <el-row>
        <el-form-item label="联系人及电话:" prop="">
          <el-input :value="buildDeliveryAddressInfo()" readonly />
        </el-form-item>
        <el-form-item v-if="businessType && businessType === 1" label="发票随货:" prop="withInvoice">
          <el-radio-group v-model="form.withInvoice">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <!--备注 及 文件-->
      <el-row>
        <el-form-item label="备注:" prop="memo">
          <el-input v-model.trim="form.memo" type="textarea" :autosize="{ minRows: 5}" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item :label="form.receivingMode === 1 ? '提货委托书:' : '附件:'">
          <FileUpload ref="deliveryFile" :file-tag="3" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" />
        </el-form-item>
      </el-row>
    </div>
  </el-form>
</template>

<script>
import { deliveryAddressList } from '@/api/hfy/escm'
import { selectByPid } from '@/api/system/dict'
import FileUpload from '@/components/FileUpload'
import { getDictSelectData, npt } from '@/utils/common'
import { newValidator } from '@/utils/validate'
export default {
  name: 'InlandLogistics',
  components: { FileUpload },
  props: {
    businessType: {
      type: [String, Number],
      default: ''
    },
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    // 除客户自提 交货类型必填
    const deliveryTypeValidator = newValidator(() => {
      if (this.form.receivingMode === 1) {
        return true
      } else {
        if (this.form.deliveryType) {
          return true
        }
        return false
      }
    }, '交货类型必选')
    // 客户自提 提货人信息必填
    const pickPersonValidator = newValidator(() => {
      if (this.form.receivingMode === 1) {
        if (this.form.pickPerson && this.form.pickPerson.id) {
          return true
        }
        return false
      } else {
        return true
      }
    }, '提货人必选')
    // 发运要求
    const shippingRequirementValidator = newValidator(() => {
      if ((this.form.receivingMode === 2 || this.form.receivingMode === 3) && this.form.deliveryType === 1) {
        if (this.form.shippingRequirement) {
          return true
        }
        return false
      } else {
        return true
      }
    }, '发运要求必选')
    // 物流商/承运商
    const expressCompanyValidator = newValidator(() => {
      if ((this.form.receivingMode === 2 || this.form.receivingMode === 3) && this.form.deliveryType === 1) {
        if (this.form.expressCompany && this.form.expressCompany.id) {
          return true
        }
        return false
      } else {
        return true
      }
    }, this.form.receivingMode === 2 ? '承运商必选' : '物流商必选')
    // 时效要求
    const timelinessRequirementValidator = newValidator(() => {
      if ((this.form.receivingMode === 2 || this.form.receivingMode === 3) && this.form.deliveryType === 1) {
        if (this.form.timelinessRequirement) {
          return true
        }
        return false
      } else {
        return true
      }
    }, '时效要求必选')
    // 送货方式
    const deliveryModeValidator = newValidator(() => {
      if (this.form.receivingMode === 3 && this.form.deliveryType === 1) {
        if (this.form.deliveryMode) {
          return true
        }
        return false
      } else {
        return true
      }
    }, '送货方式必选')
    // 费用区间
    const costRangeValidator = newValidator(() => {
      if (this.form.receivingMode === 3 && this.form.deliveryType === 1) {
        if (this.form.costRange) {
          return true
        }
        return false
      } else {
        return true
      }
    }, '费用区间必选')
    // 收货地址
    const deliveryAddressValidator = newValidator(() => {
      if ((this.form.receivingMode === 2 || this.form.receivingMode === 3) && this.form.deliveryType === 1) {
        if (this.form.deliveryAddress && this.form.deliveryAddress.id) {
          return true
        }
        return false
      } else {
        return true
      }
    }, '收货地址必选')
    return {
      // 时效要求 收货地址
      disabledExpressCompany: false, timelinessRequirementList: [], deliveryAddressList: [], deliveryAddressLoading: false,
      pickPersonList: [], pickPersonLoading: false,
      formRules: {
        receivingMode: [{ required: true, message: '收货方式必选', trigger: 'change' }],
        deliveryType: [{ required: true, validator: deliveryTypeValidator, trigger: 'change' }],
        pickPerson: [{ required: true, validator: pickPersonValidator, trigger: 'change' }],
        shippingRequirement: [{ required: true, validator: shippingRequirementValidator, trigger: 'change' }],
        expressCompany: [{ required: true, validator: expressCompanyValidator, trigger: 'change' }],
        timelinessRequirement: [{ required: true, validator: timelinessRequirementValidator, trigger: 'change' }],
        deliveryMode: [{ required: true, validator: deliveryModeValidator, trigger: 'change' }],
        costRange: [{ required: true, validator: costRangeValidator, trigger: 'change' }],
        deliveryAddress: [{ required: true, validator: deliveryAddressValidator, trigger: 'change' }]
      }
    }
  },
  watch: {
    businessType: {
      immediate: true,
      handler(value) {
        console.log('订单业务类型变更', value)
      }
    }
  },
  created() {
    // 国内承运商
    getDictSelectData('escm_express_company')
    // 自营承运商
    getDictSelectData('escm_self_express_company')
    // 费用区间
    getDictSelectData('escm_cost_range')
  },
  methods: {
    // 变更收货方式
    changeReceivingMode(receivingMode) {
      this.form.expressCompany = ''
      this.disabledExpressCompany = false
      // 自提
      if (this.form.receivingMode === 1) {
        // 查询自提人
        this.getPickPersonList()
      } else if (this.form.receivingMode === 2 && this.form.deliveryType === 1) {
        // 自营自动将承运商默认第一项
        const selfExpressCompanyArray = this.$store.getters.dictSelectData.escm_self_express_company
        const selfExpressCompany = selfExpressCompanyArray && selfExpressCompanyArray.length > 0 ? selfExpressCompanyArray[0] : ''
        this.form.expressCompany = selfExpressCompany
        this.disabledExpressCompany = true
        // 触发变更承运商 带出承运商时效要求
        this.changeExpressCompany(selfExpressCompany)
        // 带出收货地址
        this.getDeliveryAddressList()
      } else if (this.form.receivingMode === 3 && this.form.deliveryType === 1) {
        // 第三方物流
        // 带出收货地址
        this.getDeliveryAddressList()
      }
    },
    // 变更交货类型
    changeDeliveryType(deliveryType) {
      this.changeReceivingMode()
    },
    // 变更国内承运商
    changeExpressCompany(expressCompany) {
      // 清楚之前选择的时效要求
      this.form.timelinessRequirement = ''
      this.timelinessRequirementList = []
      // 单个交货点
      if (this.form.deliveryType === 1) {
        // 获取国内承运商时效要求
        selectByPid('escm_timeliness_requirement', expressCompany.id).then(res => {
          this.timelinessRequirementList = res
        })
      }
    },
    // 收货地址
    getDeliveryAddressList(query) {
      this.deliveryAddressLoading = true
      setTimeout(() => {
        deliveryAddressList({ keyword: query, page: 1, size: 10 }).then(res => {
          this.deliveryAddressList = res
          this.deliveryAddressLoading = false
        }).catch(() => { this.deliveryAddressLoading = false })
      }, 200)
    },
    // 变更收货地址
    changeDeliveryAddress(address) {
      this.form.withInvoice = ''
      if (address) {
        this.form.withInvoice = address.withInvoice
      }
    },
    // 构建收货联系人及电话
    buildDeliveryAddressInfo() {
      const deliveryAddress = this.form.deliveryAddress
      if (deliveryAddress) {
        return npt(deliveryAddress.name, deliveryAddress.phone, deliveryAddress.tel)
      }
    },
    // 提货人
    getPickPersonList(query) {
      this.pickPersonLoading = true
      setTimeout(() => {
        deliveryAddressList({ keyword: query, page: 1, size: 10 }).then(res => {
          this.pickPersonList = res
          this.pickPersonLoading = false
        }).catch(() => { this.pickPersonLoading = false })
      }, 200)
    },
    // 变更提货人
    changePickPerson(address) {
      this.form.withInvoice = ''
      if (address) {
        this.form.withInvoice = address.withInvoice
      }
    },
    // 构建提货联系人信息
    buildPickPersonInfo(pickPerson) {
      if (pickPerson) {
        return npt(pickPerson.name, pickPerson.phone, pickPerson.tel)
      }
    },
    self() {
      return this.$refs.inlandLogisticsForm
    }
  }
}
</script>
